<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import EchartsMixins from '../echarts.mixins'
import Format from '@/utils/format'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      charts: '',
      data: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      return {
        title: {
          text: this.monitorName + '监测点倾角位移变化朝向分布散点图',
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '70px',
          right: '80px',
          bottom: '80px'
        },
        xAxis: {
          name: "东",
          splitLine: {show: false},//去除网格线
          min: function (value) {
            if (value.min < -value.max) {
              return value.min
            } else {
              return -value.max
            }
          },
          max: function (value) {
            if (value.min < -value.max) {
              return Math.abs(value.min);
            } else {
              return value.max
            }
          },
          axisLine: {
            lineStyle: {
              color: '#2b5050',
              width: 3,//这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          name: "北",
          splitLine: {show: false},//去除网格线
          min: function (value) {
            if (value.min < -value.max) {
              return value.min
            } else {
              return -value.max
            }
          },
          max: function (value) {
            if (value.min < -value.max) {
              return Math.abs(value.min);
            } else {
              return value.max
            }
          },
          axisLine: {
            lineStyle: {
              color: '#2b5050',
              width: 3,//这里是为了突出显示加上的
            },
          },
        },
        toolbox: {
          right: '20',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          {
            type: 'inside',
            realtime: true
          }
        ],

        tooltip: {
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          },
          formatter: function (params) {
            let data = params.value;
            let x = data[0];
            let y = data[1];
            let xLocationName = '东'
            let yLocationName = '北'
            let xDis = Math.abs(x);
            let yDis = Math.abs(y);
            if (x < 0) {
              xLocationName = '西'

            }
            if (y < 0) {
              yLocationName = '南'
            }
            let res = '';
            if (data[6]) {
              res = "采集时间：" + data[6] + "<br/>" +
                xLocationName + "偏移：" + xDis + 'mm<br/>' +
                yLocationName + "偏移：" + yDis + 'mm<br/>' +
                "合成方向偏移：" + data[2] + 'mm<br/>' +
                "x角度值：" + data[3] + '°<br/>' +
                "Y角度值：" + data[4] + '°<br/>' +
                "合成角度值：" + data[5] + '°<br/>'
            } else {
              res = params.name + ' : ' + params.value + 'mm ';
            }
            return res
          }
        },
        series: [{
          symbolSize: 10,
          data: this.data,
          type: 'scatter',
          itemStyle: {
            normal: {
              color: function (params) {
                let data = params.value;
                let x = data[0];
                let y = data[1];
                if (x > 0 && y > 0) {
                  return "#e06343";
                } else if (x > 0 && y < 0) {
                  return '#37a354'
                } else if (x < 0 && y > 0) {
                  return '#37A2DA'
                } else if (x < 0 && y < 0) {
                  return '#b5bd48'
                }
              }
            }
          },

          markPoint: {
            symbolSize: 80,
            symbol: 'pin',
            data:
              [
                {type: 'max', name: '最大偏移量'},
                {type: 'min', name: '最大偏移量'},
              ]
          },
          markLine: {
            lineStyle: {
              type: 'solid'
            }
            ,
            data: [
              {type: 'average', name: '平均偏移量'},
            ]
          }
          ,
        }]
      }
    }
  },
  methods: {
    updateEchart(list, monitorName) {
      this.monitorName = monitorName
      let dataList = [];
      this.data = dataList;
      this.initEcharts()
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
